<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器-任瘦子</title>
    <style>
        .border {
            background: gray;
        }

        .red {
            background: red;
        }

        .orange {
            background: orange;
        }

        .yellow {
            background: yellow;
        }

        .green {
            background: green;
        }

        .qing {
            background: #9A9AF3;
        }

        .blue {
            background: blue;
        }

        .purple {
            background: purple;
        }

        .taohong {
            background: #e79af3;
        }
        #jq{
            position: relative;
            top: 20%;
            left: 35%;
        }
        body{
            font-family: 微软雅黑;
        }
    </style>
</head>

<body>
    <h1 id="show" style="text-align: center;">11 + 5 = 17<h1>
    <div id="jq" style="width: 510px;">
        <table border="1" style="font-size:50px;width: 500px;text-align: center;">
                <tr>
                    <th class="border" onClick="returnMe(this)">c</th>
                    <th class="border" onClick="returnMe(this)">x</th>
                    <th class="border" onClick="returnMe(this)">%</th>
                    <th class="border" onClick="returnMe(this)">/</th>
                </tr>
                <tbody>
                    <tr>
                        <td class="red" onClick="returnMe(this)">1</td>
                        <td class="orange" onClick="returnMe(this)">2</td>
                        <td class="yellow" onClick="returnMe(this)">3</td>
                        <th class="border" onClick="returnMe(this)">*</th>
                    </tr>
                    <tr>

                        <td class="green" onClick="returnMe(this)">4</td>
                        <td class="qing" onClick="returnMe(this)">5</td>
                        <td class="blue" onClick="returnMe(this)">6</td>
                        <td class="border" onClick="returnMe(this)">-</td>
                    </tr>
                    <tr>

                        <td class="purple" onClick="returnMe(this)">7</td>
                        <td class="" onClick="returnMe(this)">8</td>
                        <td class="taohong" onClick="returnMe(this)">9</td>
                        <td class="border" onClick="returnMe(this)">+</td>
                    </tr>
                    <tr>
                        <td class="border" onClick="returnMe(this)">?</td>
                        <td class="border" onClick="returnMe(this)">0</td>
                        <td class="border" onClick="returnMe(this)">.</td>
                        <td class="border" onClick="returnMe(this)">=</td>
                    </tr>
                </tbody>
                <table>

    </div>

                    <script>
                        function havad(str){
                            for(var i = 0; i < str.length; i++){
                                if(str[i]=='='){
                                    return true;
                                }
                            }
                            return false;
                        }
                        function returnMe(dom) {
                            var str = dom.getInnerHTML()
                            var h1 = document.getElementById("show")
                            if (str == 'c') {
                                h1.innerHTML = ''
                                return;
                            }
                            if (str == '=') {
                                var sum = eval(h1.getInnerHTML())
                                h1.innerHTML = h1.getInnerHTML() + '=' + sum
                                return;
                            }
                            if(havad(h1.getInnerHTML())==true){
                                h1.innerHTML = str;
                                return;
                            }
                            h1.innerHTML = h1.getInnerHTML() + str

                        }
                    </script>

</body>

</html>